<template>
	<view class="main">
		<view class="top">
			<image src="../../static/musicBg.png" mode="aspectFill"></image>
		</view>
		<view class="cu-card article margin-top-set" :class="isCard?'no-card':''">
			<view class="cu-item shadow">
				
				<view class="content">
					<image src="cloud://first-xlfs5.6669-first-xlfs5-1302491884/music/happy_music.png"
					 mode="aspectFit"></image>				 
					<view class="desc">
						<view class="text-content">
							旋律响起人们往往无法抗拒的立即处于音乐的氛围当中，使人忘却烦恼，净化心灵。
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 宫格列表 -->
		<view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog" @tap.stop>
				<radio-group class="block" @change="Gridchange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in 3" :key="index">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">{{index +3}} 列</view>
								<radio class="round" :value="(index + 3) + ''" :class="gridCol==index+3?'checked':''" :checked="gridCol==index+3"></radio>
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		
		<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
			<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2">
				<view @tap=toPage(item.url)>
					<image :src="item.pngSrc" class="png"></image>
					<text>{{item.name}}</text>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCard: true,
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: true,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				cuIconList: [{
					pngSrc: '/static/image/music/png/yinle-_11.png',
					name: '关于乐理',
					url: 'music_theory'
				}, {
					pngSrc: '/static/image/music/png/yinle-_3.png',
					name: '民谣吉他',
					url: 'folk_guitar'
				}, {
					pngSrc: '/static/image/music/png/yinle-_16.png',
					name: '电吉他',
					url: 'electric_guitar'
				}, {
					pngSrc: '/static/image/music/png/yinle-_0.png',
					name: '贝斯',
					url: 'bass_guitar'			
				}, {
					pngSrc: '/static/image/music/png/yinle-_2.png',
					name: '钢琴',
					url: 'piano'
				}]
			};
		},
		methods: {
			IsCard(e) {
				this.isCard = e.detail.value
			},
			toPage(pageName) {
				console.log(pageName)
				uni.navigateTo({
				    url: `../music/${ pageName }`
				});
			}
		}
	}
</script>

<style>
	.main {
		height: 100vh;
		background-color: #FFFFFF;
	}
	.png {
		width: 72rpx;
		height: 72rpx;
	}
	.top{
		position: absolute;
		width: 100%;
		top: 0;
		background-color: #FFFFFF;
		z-index: -1;
	}
</style>
